<template>
    <div class="app-info">
        <div class="ico">
            <el-image
                src="https://bpic.51yuansu.com/pic2/cover/00/34/56/581171e37018e_610.jpg?x-oss-process=image/sharpen,100">
            </el-image>
        </div>
        <div class="info">
            <div class="info-header">
                <div class="title">{{ detail.applicationName }}</div>
                <el-tag :type="detail.status === 1 ? 'success' : 'danger'">
                    {{ DICT.getDictLabel("3c22ef76-35d4-4500-b9ba-a93ed58120d7", detail.status) }}
                </el-tag>
            </div>
            <div class="info-date">
                <div class="info-date-item">版本：{{ detail.version }}</div>
                <div class="info-date-item">更新时间：{{ detail.createTime }}</div>
            </div>
            <div class="info-description">{{ detail.description }}</div>
        </div>
        <div class="operation">
            <el-button type="primary" @click="openTaskDialog">创建任务</el-button>
        </div>
    </div>
</template>

<script>
export default {
    name: "AppInfo",

    props: {
        id: { type: String, default: "" }
    },

    data () {
        return {
            detail: {
                id: "",
                applicationName: "",
                status: "",
                description: "",
                createTime: "",
                updateTime: "",
            }
        };
    },

    watch: {
        id: {
            immediate: true,
            handler (newVal, oldVal) {
                this.getAppInfo();
            }
        }
    },

    created () {},

    mounted () {},

    methods: {
        /* 获取应用信息 */
        getAppInfo () {
            if (!this.id) return;
            this.$request.post(this.API.GET_APPLICATION_INFO, { id: this.id }).then(res => {
                console.log("getAppInfo", res);
                if (res.success) {
                    this.detail = this._.assign({}, res.data.data);
                }
            });
        },

        /* 打开创建任务对话框 */
        openTaskDialog () {
            this.$emit("openTaskDialog");
        }
    }
}
</script>

<style lang="scss">
.app-info {
    margin: 20px;
    display: flex;
    padding-bottom: 20px;
    border-bottom: 1px solid #E5E5E5;
    .ico {
        width: 200px;
        height: 200px;
    }
    .info {
        margin: 0 20px;
        flex-grow: 1;
        &-header {
            display: flex;
            margin-bottom: 20px;
            .title {
                font-size: 24px;
                font-weight: 700;
                height: 32px;
                line-height: 32px;
                margin-right: 20px;
            }
        }
        &-date {
            display: flex;
            font-size: 12px;
            color: #666666;
            margin-bottom: 20px;
            &-item {
                margin-right: 20px;
            }
        }
        &-description {
            font-size: 14px;
            color: #333333;
        }
    }
}
</style>